<template>
  <div
    class="image-area"
    :class="{
      isAdd: isAdd,
    }"
    @mousedown="showAreaMouseDown"
    ref="imgAreaRef"
  >
    <template v-for="(item, index) in areaList" :key="index">
      <div
        class="show-area"
        :style="{
          width: `${item.width}px`,
          height: `${item.height}px`,
          left: `${item.left}px`,
          top: `${item.top}px`,
        }"
        @mousedown="itemAreaClick(item)"
        :class="{
          edit: item.edit,
        }"
      >
        <!--  -->
        <div
          v-if="item.edit"
          class="edit-area"
          name="editArea"
          v-click-outside="itemMouseLeave"
          @mousedown.prevent="itemAreaMouseDown($event, item)"
        >
          <div
            class="top-line edit-area-line"
            @mousedown="topDown($event, item)"
          ></div>
          <div
            class="left-line edit-area-line"
            @mousedown="leftDown($event, item)"
          ></div>
          <div
            class="right-line edit-area-line"
            @mousedown="rightDown($event, item)"
          ></div>
          <div
            class="bottom-line edit-area-line"
            @mousedown="bottomDown($event, item)"
          ></div>
          <div
            class="top edit-area-item"
            @mousedown="topDown($event, item)"
          ></div>
          <div
            class="left-top edit-area-item"
            @mousedown="leftTopDown($event, item)"
          ></div>
          <div
            class="left edit-area-item"
            @mousedown="leftDown($event, item)"
          ></div>
          <div
            class="left-bottom edit-area-item"
            @mousedown="leftBottomDown($event, item)"
          ></div>
          <div
            class="right-top edit-area-item"
            @mousedown="rightTopDown($event, item)"
          ></div>
          <div
            class="right edit-area-item"
            @mousedown="rightDown($event, item)"
          ></div>
          <div
            class="right-bottom edit-area-item"
            @mousedown="rightBottomDown($event, item)"
          ></div>
          <div
            class="bottom edit-area-item"
            @mousedown="bottomDown($event, item)"
          ></div>
          <div class="bottom-area-edit" v-if="!isremove">
            <span class="area-btn">选区1</span>
            <a class="area-btn" title="添加分区"
              ><BorderOuterOutlined></BorderOuterOutlined
            ></a>
            <a class="area-btn" title="添加删除当前分区"
              ><i class="icon iconfont">&#xe75e;</i></a
            >
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import { ref } from "@vue/reactivity";
import { computed } from "@vue/runtime-core";
import { BorderOuterOutlined } from "@ant-design/icons-vue";
import { isPointInPolygon } from "geolib";
import intersect from "lines-intersect";
export default {
  props: {
    list: {
      type: Array,
      default: () => [],
    },
    isAdd: {
      type: Boolean,
      default: () => false,
    },
    isremove: {
      type: Boolean,
      default: () => false,
    },
  },
  components: {
    BorderOuterOutlined,
  },
  setup(props, context) {
    // isPointInPolygon(
    //   {
    //     latitude: 2,
    //     longitude: 2,
    //   },
    //   [
    //     { latitude: 0, longitude: 0 },
    //     { latitude: 0, longitude: 2 },
    //     { latitude: 2, longitude: 2 },
    //     { latitude: 2, longitude: 0 },
    //   ]
    // ),
    // isPointInLine(
    //   { latitude: 0, longitude: 2 },
    //   { latitude: 0, longitude: 0 },
    //   { latitude: 0, longitude: 3 }
    // )
    //
    const areaList = ref([]);
    const imgAreaRef = ref();
    const isAdd = computed(() => props.isAdd);
    var lastMove = 0;
    var eventThrottle = 1;
    const clac = {
      top(e, item, rect) {
        const height = e.clientY - rect.top;
        const oldTop = item.top;
        const oldHeight = item.height;
        if (!(height <= 0 || item.height + (item.top - height) < 10)) {
          item.height += item.top - height;
          item.top = height;
        }
        clac.setPoint(item);
        if (clac.isPointInPolygon(item)) {
          item.height = oldHeight;
          item.top = oldTop;
        }
      },
      left(e, item, rect) {
        const width = e.screenX - rect.left;
        const oldLeft = item.left;
        const oldWidht = item.width;
        if (!(width <= 0 || item.width + (item.left - width) < 10)) {
          item.width = item.width + (item.left - width);
          item.left = width;
        }
        clac.setPoint(item);
        if (clac.isPointInPolygon(item)) {
          item.left = oldLeft;
          item.width = oldWidht;
        }
      },
      right(e, item, rect) {
        const oldWidth = item.width;
        console.log(oldWidth);
        const width = e.clientX - item.startClientX;
        item.width += width;
        if (item.width + item.left > rect.width) {
          item.width = rect.width - item.left;
        }

        if (item.width < 10) {
          item.width = 10;
        }
        item.startClientX = e.clientX;
        clac.setPoint(item);
        if (clac.isPointInPolygon(item)) {
          item.width = oldWidth;
        }
      },
      bottom(e, item, rect) {
        const height = e.clientY - item.startClientY;
        let oldHeight = item.height;
        item.height += height;
        if (item.height + item.top > rect.height) {
          item.height = rect.height - item.top;
          oldHeight = item.height;
        }
        if (item.height < 10) {
          item.height = 10;
        }
        item.startClientY = e.clientY;
        clac.setPoint(item);
        if (clac.isPointInPolygon(item)) {
          item.height = oldHeight;
        }
      },
      setPoint(item) {
        console.log(item);
        item.point = [
          {
            latitude: item.left,
            longitude: item.top,
          },
          {
            latitude: item.left + item.width,
            longitude: item.top,
          },
          {
            latitude: item.left + item.width,
            longitude: item.top + item.height,
          },
          {
            latitude: item.left,
            longitude: item.top + item.height,
          },
        ];
        // item.point = [
        //   [item.left, item.top],
        //   [item.left + item.width, item.top],
        //   [item.left, item.top + item.height],
        //   [item.left + item.width, item.top + item.height],
        // ];
      },
      clearEventListener(item) {
        item.areaPoint = undefined;
        item.editEvent = false;
        document.onmousemove = undefined;
        document.onmouseup = undefined;
      },
      isPointInPolygon(item) {
        //节流
        var now = Date.now();
        if (now > lastMove + eventThrottle) {
          lastMove = now;
          //our drag code here
        }
        let areaListValue = JSON.parse(JSON.stringify(areaList.value));
        areaListValue = areaListValue.filter((s) => {
          return s.id !== item.id && s.point[0].latitude;
        });
        //  console.log(isPointInPolygon(item, areaListValue));

        let result = false;
        //覆盖
        for (const area in areaListValue) {
          const areaItem = areaListValue[area];
          //A覆盖B
          for (var index in item.point) {
            // for (var i = 0; i++; i < point2.length) {
            const itemPoint = item.point[index];
            if (
              itemPoint.latitude &&
              itemPoint.longitude &&
              isPointInPolygon(
                {
                  latitude: itemPoint.latitude,
                  longitude: itemPoint.longitude,
                },
                areaItem.point
              )
            ) {
              console.log("覆盖");
              result = true;
              return result;
            }
            // }
          }
          //B覆盖A
          for (const index in areaItem.point) {
            const pointItem = areaItem.point[index];
            if (
              pointItem.latitude &&
              pointItem.longitude &&
              isPointInPolygon(
                {
                  latitude: pointItem.latitude,
                  longitude: pointItem.longitude,
                },
                item.point
              )
            ) {
              console.log("覆盖");
              result = true;
              return result;
            }
          }
        }
        //交叉
        for (const index in item.point) {
          if (parseInt(index) + 1 < item.point.length) {
            const itemPoint = item.point[index];
            const itemPoint2 = item.point[parseInt(index) + 1];
            for (const area in areaListValue) {
              const areaItem = areaListValue[area].point;
              for (const idx in areaItem) {
                if (parseInt(idx) + 1 < areaItem.length) {
                  const areaPoint = areaItem[idx];
                  const areaPoint2 = areaItem[parseInt(idx) + 1];
                  if (
                    itemPoint.latitude &&
                    itemPoint.longitude &&
                    itemPoint2.latitude &&
                    itemPoint2.longitude &&
                    areaPoint.latitude &&
                    areaPoint.longitude &&
                    areaPoint2.latitude &&
                    areaPoint2.longitude &&
                    intersect(
                      itemPoint.latitude || 0,
                      itemPoint.longitude || 0,
                      itemPoint2.latitude || 0,
                      itemPoint2.longitude || 0,
                      areaPoint.latitude || 0,
                      areaPoint.longitude || 0,
                      areaPoint2.latitude || 0,
                      areaPoint2.longitude || 0
                    )
                  ) {
                    console.log("覆盖");
                    result = true;
                    return result;
                  }
                }
              }
            }
          }
        }
        // //交叉
        // for (const area in areaListValue) {
        //   const areaItem = areaListValue[area];
        //   if (!clac.isRectangleOverlap(item.point, areaItem.point)) {
        //     console.log(!clac.isRectangleOverlap(item.point, areaItem.point));
        //   }
        // }
        return result;
      },
      isRectangleOverlap: (rect1, rect2) => {
        let overlap_points = [
          [
            Math.max(rect1[0][0], rect2[0][0]),
            Math.max(rect1[0][1], rect2[0][1]),
          ],
          [
            Math.min(rect1[1][0], rect2[1][0]),
            Math.max(rect1[1][1], rect2[1][1]),
          ],
          [
            Math.max(rect1[2][0], rect2[2][0]),
            Math.min(rect1[2][1], rect2[2][1]),
          ],
          [
            Math.min(rect1[3][0], rect2[3][0]),
            Math.min(rect1[3][1], rect2[3][1]),
          ],
        ];
        if (overlap_points[0][0] < overlap_points[3][0]) {
          [overlap_points[0], overlap_points[2]] = [
            overlap_points[1],
            overlap_points[3],
          ];
        }
        if (overlap_points[0][1] < overlap_points[3][1]) {
          [overlap_points[0], overlap_points[1]] = [
            overlap_points[2],
            overlap_points[3],
          ];
        }

        return !(
          (rect1[0][0] == overlap_points[3][0] &&
            rect1[0][1] == overlap_points[3][1]) ||
          (rect1[1][0] == overlap_points[2][0] &&
            rect1[1][1] == overlap_points[2][1]) ||
          (rect1[2][0] == overlap_points[1][0] &&
            rect1[2][1] == overlap_points[1][1]) ||
          (rect1[3][0] == overlap_points[0][0] &&
            rect1[3][1] == overlap_points[0][1])
        );
      },
    };

    //#region   画区域
    let index = 0;
    let rect = undefined;
    const showAreaMouseMove = (e) => {
      e.preventDefault();
      // index
      if (index > 0 && isAdd.value) {
        //  const rect = event.currentTarget.getBoundingClientRect();
        let item = areaList.value[index - 1];
        // let oldItem = JSON.parse(JSON.stringify(item));
        clac.setPoint(item);
        item.end = {
          latitude: e.clientX - rect.left,
          longitude: e.clientY - rect.top,
        };
        item.width =
          item.end.latitude - item.start.latitude > 0
            ? item.end.latitude - item.start.latitude
            : -(item.end.latitude - item.start.latitude);
        clac.setPoint(item);
        // if (clac.isPointInPolygon(item)) {
        //   item.width = oldItem.width;
        //   clac.setPoint(item);
        // }
        item.height =
          item.end.longitude - item.start.longitude > 0
            ? item.end.longitude - item.start.longitude
            : -(item.end.longitude - item.start.longitude);
        // if (clac.isPointInPolygon(item)) {
        //   item.height = oldItem.height;
        //   clac.setPoint(item);
        // }
        item.left =
          item.start.latitude > item.end.latitude
            ? item.end.latitude
            : item.start.latitude;

        // if (clac.isPointInPolygon(item)) {
        //   item.left = oldItem.left;
        //   clac.setPoint(item);
        // }
        item.top =
          item.start.longitude > item.end.longitude
            ? item.end.longitude
            : item.start.longitude;

        // if (clac.isPointInPolygon(item)) {
        //   item.top = oldItem.top;
        //   clac.setPoint(item);
        // }
        // areaList.value[index - 1].left =
        //   ((item.start.latitude > item.end.latitude ? item.end.latitude : item.start.latitude) / rect.width) * 100;
        // areaList.value[index - 1].top =
        //   ((item.start.longitude > item.end.longitude ? item.end.longitude : item.start.longitude) / rect.height) * 100;
      }

      //
    };
    const showAreaMouseup = (e) => {
      e.preventDefault();

      if (index > 0) {
        let item = areaList.value[index - 1];
        areaList.value[index - 1].width =
          areaList.value[index - 1].width > 10
            ? areaList.value[index - 1].width
            : 10;
        areaList.value[index - 1].height =
          areaList.value[index - 1].height > 10
            ? areaList.value[index - 1].height
            : 10;
        index = 0;
        clac.setPoint(item);
        clac.clearEventListener(item);
        context.emit("update:isAdd", false);
      }
    };

    const showAreaMouseDown = (e) => {
      e.preventDefault();
      if (isAdd.value) {
        //

        document.onmousemove = showAreaMouseMove;
        document.onmouseup = showAreaMouseup;

        // document.addEventListener("mousemove", showAreaMouseMove);
        // document.addEventListener("mouseup", showAreaMouseup);

        rect = e.currentTarget.getBoundingClientRect();
        index = areaList.value.length;
        areaList.value.push({
          id: index,
          start: {
            latitude: e.clientX - rect.left,
            longitude: e.clientY - rect.top,
          },
          end: {},
          edit: false,
        });
        index = areaList.value.length;
        //   event = e;
      }
    };

    //#endregion

    //#region   区域拖动

    //  let itemAreaIndex = 0;

    const itemAreaClick = (item) => {
      console.log("itemAreaClick", item);
      item.edit = true;
    };

    const itemAreaMouseMove = (e, item) => {
      e.preventDefault();
      if (item.editEvent && !item.areaPoint) {
        context.emit("update:isremove", true);
        const rect = imgAreaRef.value.getClientRects()[0];
        item.endEvent = {
          latitude: e.clientX - rect.left,
          longitude: e.clientY - rect.top,
        };
        item.left =
          item.left - (item.startEvent.latitude - item.endEvent.latitude);
        item.top =
          item.top - (item.startEvent.longitude - item.endEvent.longitude);
        item.left = item.left < 0 ? 0 : item.left;
        item.top = item.top < 0 ? 0 : item.top;
        item.left =
          item.left + item.width > rect.width
            ? rect.width - item.width
            : item.left;
        item.top =
          item.top + item.height > rect.height
            ? rect.height - item.height
            : item.top;
        if (item.left + item.width > rect.width) {
          return;
        }
        if (item.top + item.height > rect.height) {
          return;
        }

        // clac.top(e, item, rect);
        // clac.left(e, item, rect);
        // clac.right(e, item, rect);
        // clac.bottom(e, item, rect);

        item.startEvent = {
          latitude: e.clientX - rect.left,
          longitude: e.clientY - rect.top,
        };
      }
    };
    const itemMouseLeave = () => {
      areaList.value = areaList.value.map((s) => {
        return {
          ...s,
          edit: false,
        };
      });
    };

    const itemAreaMouseDown = (e, item) => {
      e.preventDefault();
      if (!item.areaPoint) {
        document.onmousemove = null;
        document.onmousemove = (e) => {
          itemAreaMouseMove(e, item);
        };
        document.onmouseup = undefined;
        clac.setPoint(item);
        document.onmouseup = () => {
          item.editEvent = false;
          clac.setPoint(item);
          context.emit("update:isremove", false);
        };
      }

      item.editEvent = true;
      const rect = imgAreaRef.value.getClientRects()[0];
      item.startEvent = {
        latitude: e.clientX - rect.left,
        longitude: e.clientY - rect.top,
      };
    };

    //#endregion

    //#region  leftMouse
    let LeftIndex = 0;

    const leftMove = (e, item) => {
      if (item.areaPoint === "left" && LeftIndex > 0) {

        const rect = imgAreaRef.value.getClientRects()[0];
        console.log('left',rect);
        clac.left(e, item, rect);
      }
    };

    const leftDown = (e, item) => {
      LeftIndex = 1;
      item.areaPoint = "left";
      document.onmouseup = undefined;
      document.onmouseup = () => {
        if (item.areaPoint === "left") {
          LeftIndex = 0;
          clac.clearEventListener(item);
          clac.setPoint(item);
          context.emit("update:isremove", false);
        }
      };
      document.onmousemove = undefined;
      document.onmousemove = (e) => {
        leftMove(e, item);
      };
    };
    //#endregion

    //#region  leftTopMouse
    let leftTop = 0;
    const leftTopMove = (e, item) => {
      if (item.areaPoint === "leftBottom" && leftTop > 0) {
        const rect = imgAreaRef.value.getClientRects()[0];
        clac.top(e, item, rect);
        clac.left(e, item, rect);
      }
    };

    const leftTopDown = (e, item) => {
      leftTop = 1;
      item.areaPoint = "leftBottom";
      item.startClientY = e.clientY;
      document.onmouseup = undefined;
      document.onmouseup = () => {
        if (item.areaPoint === "leftBottom") {
          leftTop = 0;
          clac.clearEventListener(item);
          clac.setPoint(item);
          context.emit("update:isremove", false);
        }
      };
      document.onmousemove = undefined;
      document.onmousemove = (e) => {
        leftTopMove(e, item);
      };
    };
    //#endregion
    //#region  leftBottomMouse
    //   let LeftIndex = 0;
    let leftBottom = 0;
    const leftBottomMove = (e, item) => {
      if (item.areaPoint === "lefttop" && leftBottom > 0) {
        const rect = imgAreaRef.value.getClientRects()[0];

        clac.bottom(e, item, rect);
        clac.left(e, item, rect);
      }
    };

    const leftBottomDown = (e, item) => {
      leftBottom = 1;
      item.areaPoint = "lefttop";
      item.startClientY = e.clientY;
      document.onmouseup = () => {
        if (item.areaPoint === "lefttop") {
          leftBottom = 0;
          clac.clearEventListener(item);
          clac.setPoint(item);
          context.emit("update:isremove", false);
        }
      };
      document.onmousemove = undefined;
      document.onmousemove = (e) => {
        leftBottomMove(e, item);
      };
    };

    //#endregion
    //#region  topMouse
    let topIndex = 0;
    const topMove = (e, item) => {
      if (item.areaPoint === "top" && topIndex > 0) {
        const rect = imgAreaRef.value.getClientRects()[0];
        clac.top(e, item, rect);
      }
    };

    const topDown = (e, item) => {
      topIndex = 1;
      item.areaPoint = "top";
      item.startClientY = e.clientY;
      document.onmouseup = undefined;
      document.onmouseup = () => {
        if (item.areaPoint === "top") {
          topIndex = 0;
          clac.clearEventListener(item);
          clac.setPoint(item);
          context.emit("update:isremove", false);
        }
      };
      document.onmousemove = undefined;
      document.onmousemove = (e) => {
        topMove(e, item);
      };
    };
    //#endregion

    //#region  RightMouse
    let RightIndex = 0;
    const rightMove = (e, item) => {
      if (item.areaPoint === "right" && RightIndex > 0) {
        const rect = imgAreaRef.value.getBoundingClientRect();
        clac.right(e, item, rect);
      }
    };
    const rightDown = (e, item) => {
      RightIndex = 1;
      item.areaPoint = "right";
      item.startClientX = e.clientX;

      document.onmouseup = () => {
        if (item.areaPoint === "right") {
          RightIndex = 0;
          clac.clearEventListener(item);
          clac.setPoint(item);
          context.emit("update:isremove", false);
        }
      };
      document.onmousemove = undefined;
      document.onmousemove = (e) => {
        rightMove(e, item);
      };
    };
    //#endregion

    //#region  rightBottomMouse

    let RightTopIndex = 0;
    const rightTopMove = (e, item) => {
      if (item.areaPoint === "righttop" && RightTopIndex > 0) {
        const rect = imgAreaRef.value.getBoundingClientRect();
        clac.top(e, item, rect);
        clac.right(e, item, rect);
      }
    };
    const rightTopDown = (e, item) => {
      RightTopIndex = 1;
      item.areaPoint = "righttop";
      item.startClientX = e.clientX;
      item.startClientY = e.clientY;
      document.onmouseup = undefined;
      document.onmouseup = () => {
        if (item.areaPoint === "righttop") {
          RightTopIndex = 0;
          clac.clearEventListener(item);
          clac.setPoint(item);
          context.emit("update:isremove", false);
        }
      };
      document.onmousemove = undefined;
      document.onmousemove = (e) => {
        rightTopMove(e, item);
      };
    };
    //#endregion

    //#region  rightBottomMouse

    let RightBottomIndex = 0;
    const rightBottomMove = (e, item) => {
      if (item.areaPoint === "rightbottom" && RightBottomIndex > 0) {
        const rect = imgAreaRef.value.getBoundingClientRect();
        clac.right(e, item, rect);
        clac.bottom(e, item, rect);
      }
    };
    const rightBottomDown = (e, item) => {
      RightBottomIndex = 1;
      item.areaPoint = "rightbottom";
      item.startClientX = e.clientX;
      item.startClientY = e.clientY;
      document.onmouseup = undefined;
      document.onmouseup = () => {
        if (item.areaPoint === "rightbottom") {
          RightBottomIndex = 0;
          clac.clearEventListener(item);
          clac.setPoint(item);
          context.emit("update:isremove", false);
        }
      };
      document.onmousemove = undefined;
      document.onmousemove = (e) => {
        rightBottomMove(e, item);
      };
    };
    //#endregion

    //#region  BottomMouse
    let bottomIndex = 0;
    const bottomMove = (e, item) => {
      if (item.areaPoint === "bottom" && bottomIndex > 0) {
        const rect = imgAreaRef.value.getBoundingClientRect();
        clac.bottom(e, item, rect);
      }
    };

    const bottomDown = (e, item) => {
      bottomIndex = 1;
      item.areaPoint = "bottom";
      item.startClientY = e.clientY;
      document.onmouseup = undefined;
      document.onmouseup = () => {
        if (item.areaPoint === "bottom") {
          clac.clearEventListener(item);
          clac.setPoint(item);
          context.emit("update:isremove", false);
        }
      };
      document.onmousemove = undefined;
      document.onmousemove = (e) => {
        bottomMove(e, item);
      };
    };
    //#endregion

    return {
      showAreaMouseDown,

      itemAreaClick,
      itemAreaMouseDown,

      topDown,
      leftDown,
      leftTopDown,
      leftBottomDown,
      rightDown,
      rightTopDown,
      rightBottomDown,
      bottomDown,

      itemMouseLeave,
      imgAreaRef,
      areaList,
    };
  },
};
</script>
<style lang="scss" scoped>
.image-area {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1000;
  z-index: 8;
  .show-area {
    position: absolute;
    background: rgba(255, 255, 0, 0.2);
    border: 1px solid #ffffff;
    .edit-area {
      position: relative;
      width: 100%;
      height: 100%;
      position: relative;
      width: 100%;
      height: 100%;
      border: 1px dashed #ffffff;
      .edit-area-item {
        width: 5px;
        height: 5px;
        position: absolute;
        background: #ffffff;
        border: 1px solid;
        z-index: 99999;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
      }
      .top {
        top: 0;
        left: 50%;
        cursor: s-resize;
      }
      .left {
        top: 50%;
        left: 0;
        cursor: e-resize;
      }
      .left-top {
        top: 0;
        left: 0;
        cursor: nw-resize;
      }
      .left-bottom {
        top: 100%;
        left: 0;
        cursor: sw-resize;
      }
      .bottom {
        top: 100%;
        left: 50%;
        cursor: ns-resize;
      }
      .right-top {
        left: 100%;
        top: 0;
        cursor: sw-resize;
      }
      .right {
        left: 100%;
        top: 50%;
        cursor: e-resize;
      }
      .right-bottom {
        left: 100%;
        top: 100%;
        cursor: nw-resize;
      }
      .bottom-area-edit {
        position: absolute;
        bottom: -35px;
        right: 0;
        height: 30px;
        min-width: 100px;
        background: #ffffff;
        border: 1px solid #e2e2e1;
        display: flex;
        justify-items: center;
        align-items: center;
        padding: 10px;
        .area-btn {
          margin: 5px;
        }
      }
      .top-line {
        width: 100%;
        height: 5px;
        top: -2px;
        left: 0;
        position: absolute;
        cursor: s-resize;
        z-index: 9999;
      }
      .bottom-line {
        width: 100%;
        height: 5px;
        bottom: -2px;
        left: 0;
        position: absolute;
        cursor: s-resize;
        z-index: 9999;
      }
      .left-line {
        width: 4px;
        height: 100%;
        left: -2px;
        top: 0;
        position: absolute;
        cursor: e-resize;
        z-index: 9999;
      }
      .right-line {
        width: 4px;
        height: 100%;
        right: -2px;
        top: 0;
        position: absolute;
        cursor: e-resize;
        z-index: 9999;
      }
    }
  }
  .edit {
    cursor: all-scroll;
    border: 0;
    z-index: 1000;
  }
}
.isAdd {
  cursor: crosshair;
}
</style>
